<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue2.6.12.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<navbar title="这是首页" :myshow="false" :mymsg="msg"></navbar>
			<navbar ></navbar>
			<navbar title="这是文章列表"></navbar>
		</div>
	</body>
	<script type="text/javascript">
		Vue.component('navbar',{
			//父组件传来的属性在这里进行接收, 父组件的属性可以传递给子组件，子组件的props 能接收
			props:{
				title:{
					type:String,   //属性验证,如果传入不符合的属性将报错
					default:"这是默认值"  //不传递的话 设置默认值
				},
				myshow:{
					type:Boolean,
					default:true,
				},
				mymsg:{
					type:String,
					default:'暂无数据'
				}
				
			},
			template:`
				<div>
					<button v-show="myshow">返回{{myshow}}</button>
					<h3>{{mymsg}}</h3>
					<h3>{{title}}</h3>
				</div>
			`,
		})
		
		var vm = new Vue({
			el:'#app',
			data:{
				msg:"111"
			},
			methods:{
				
			}
		})
	</script>
</html>
